<div *ngIf="rendered" class="widget stats-widget" ngClass.xs="double-height xs">
  <div class="card-container  front">
    <mat-card style="overflow:hidden" class="front" fxLayout="row" fxLayoutWrap fxLayoutAlign="space-between stretch">
      <mat-card-content #carouselparent>
        <mat-toolbar-row class="view-{{currentSlideName}}">

          <!-- Mobile Only: Exit Widget -->
          <button fxHide.gt-xs class="mat-card-title-text primary-nav" *ngIf="currentSlide == '0'" mat-icon-button color="default" (click)="updateSlide(path[previousSlide].name, true, previousSlide)"
            ix-auto ix-auto-type="button" ix-auto-identifier="goBack">
            <mat-icon (click)="goBack()" class="back-arrow">chevron_left</mat-icon>
          </button>

          <!-- Back to previous slide -->
          <button class="mat-card-title-text primary-nav" *ngIf="currentSlide !== '0'" mat-icon-button color="default" (click)="updateSlide(path[previousSlide].name, true, previousSlide)"
            ix-auto ix-auto-type="button" ix-auto-identifier="previousSlide">
            <mat-icon class="back-arrow">chevron_left</mat-icon>
          </button>

          <span class="mat-card-title-text primary-nav">
            <span class="card-title-text">
              &nbsp;<span>{{title | translate}} </span>
            </span>
          </span>

            <div class="controls">

              <button mat-icon-button class="" (click)="router.navigate(['network/interfaces/edit/'+nicState.name])"
                [ix-auto]="nicState.name" ix-auto-type="button" ix-auto-identifier="configure">
                <mat-icon role="img"
                          matTooltip="{{'Configure' | translate}} {{nicState.name}}"
                  matTooltipPosition="above"
                  aria-label="Configure Interface">
                    settings
                </mat-icon>
              </button>

              <button mat-icon-button class="" (click)="router.navigate(['reportsdashboard/network'])"
                [ix-auto]="nicState.name" ix-auto-type="button" ix-auto-identifier="networkReports">
                <mat-icon role="img"
                  matTooltip="{{'Network Reports' | translate}}"
                  matTooltipPosition="above"
                  aria-label="Network Reports">
                    insert_chart
                </mat-icon>
              </button>

            </div>

        </mat-toolbar-row>
        <!-- Carousel -->
        <div id="" class="carousel" #carousel [ngClass]="{'lagg': nicState.lagg_ports}" >
          <div fxFlex="100" class="slide overview" fxLayout="row" fxLayout.xs="column" fxLayoutAlign="space-between">
            <div class="left" fxFlex="40" fxFlex.xs="250px">
              <div class="overlay" fxFlex="100" fxLayout="column" fxLayoutAlign="space-around center">

              <div fxFlex="66" class="left-content">
                <div class="nic-name" [ngClass]="{ 'up': nicState.link_state == 'LINK_STATE_UP', 'down': nicState.link_state !== 'LINK_STATE_UP' }">
                  <span textLimiter threshold="7" >{{nicState.name | translate}}</span>
                </div> 

                <div class="link-state" [ngClass]="{'up': nicState.link_state == 'LINK_STATE_UP', 'down': nicState.link_state !== 'LINK_STATE_UP'}">
                  {{linkState | translate }}
                    <mat-icon *ngIf="nicState.link_state == 'LINK_STATE_UP' " role="img" fontSet="mdi-set" fontIcon="mdi-check-circle"></mat-icon>
                    <mat-icon *ngIf="nicState.link_state !== 'LINK_STATE_UP' " role="img" fontSet="mdi-set" fontIcon="mdi-close-circle"></mat-icon>

                  <div *ngIf="traffic && nicState.link_state == 'LINK_STATE_UP'" class="nic-traffic">
                    <div class="tr">
                      <div class="td label"><strong>{{"In" | translate}}: &nbsp;</strong></div>
                      <div class="td value"><span class="stat">{{traffic.received}}</span> {{traffic.receivedUnits}}/s</div>
                    </div>
                    <div class="tr">
                      <div class="td label"><strong>{{"Out" | translate}}: </strong>&nbsp;</div>
                      <div class="td value"><span class="stat">{{traffic.sent}}</span> {{traffic.sentUnits}}/s</div>
                    </div>
                  </div>

                  <div *ngIf="!traffic && nicState.link_state == 'LINK_STATE_UP'" class="nic-traffic-gathering">
                    {{ "Gathering data" | translate }}...
                  </div> 

                  <div *ngIf="nicState.link_state !== 'LINK_STATE_UP'" class="no-nic-traffic">
                    No Traffic
                  </div> 
                </div>

              </div>
              </div>
            </div>

            <div class="right" fxFlex="60" fxFlex.xs fxLayout="column" fxLayoutAlign="space-around center">
              <div fxFlex="100">
                <div class="list-subheader">{{"Overview" | translate}}</div>
                <mat-list>
                  <mat-list-item><strong>{{"Media Type" | translate}}: </strong>&nbsp;&nbsp;{{nicState.active_media_type}}</mat-list-item>
                  <mat-list-item><strong>{{"Media Subtype" | translate}}: </strong>&nbsp;&nbsp;{{nicState.active_media_subtype}}</mat-list-item>
                  <mat-list-item (click)="updateSlide('addresses', ipAddresses.length > 1, 1)" [ngClass]="{'clickable': ipAddresses.length > 1}">
                    <strong>{{"IP Addresses" | translate}}: </strong>&nbsp;&nbsp;  {{ipAddresses.length > 0 ? ipAddresses[0].address : ipAddresses.length}}<span *ngIf="ipAddresses.length > 0">/{{ipAddresses[0].netmask}}</span> &nbsp;&nbsp;<span class="more-addresses" *ngIf="ipAddresses.length > 1">({{ipAddresses.length - 1}} more)</span>
                      <mat-icon *ngIf="ipAddresses.length > 1" class="next-slide" ix-auto ix-auto-type="button" ix-auto-identifier="nextSlide">chevron_right</mat-icon>
                  </mat-list-item>
                  <mat-list-item (click)="updateSlide('vlans', nicState.vlans.length > 0, 1)" [ngClass]="{'clickable': nicState.vlans.length > 0}">
                    <strong>{{"VLANs" | translate}}: </strong>&nbsp;&nbsp;  {{nicState.vlans.length}}
                      <mat-icon *ngIf="nicState.vlans.length > 0" class="next-slide" ix-auto ix-auto-type="button" ix-auto-identifier="nextSlide">chevron_right</mat-icon>
                  </mat-list-item>
                  <mat-list-item *ngIf="nicState.lagg_ports" (click)="updateSlide('interfaces',nicState.lagg_ports.length > 0, 1)" [ngClass]="{'clickable': nicState.lagg_ports.length > 0}">
                    <strong>{{"Interfaces" | translate}}: </strong>&nbsp;&nbsp;  {{nicState.lagg_ports.length}}
                      <mat-icon *ngIf="nicState.lagg_ports.length > 0" class="next-slide" ix-auto ix-auto-type="button" ix-auto-identifier="nextSlide">chevron_right</mat-icon>
                  </mat-list-item>
                </mat-list>
              </div>
            </div>

          </div>


          <div class="slide addresses" *ngIf="path[1].name == 'addresses'" fxFlex="100">
            <div class="list-subheader">{{"Addresses" | translate}}</div>
            <mat-list *ngIf="nicState && nicState.aliases.length > 0"> 
              <mat-list-item role="listitem"*ngFor="let ip of nicState.aliases;" [ngClass]="{'hidden': ip.type !== 'INET' && ip.type !== 'INET6'}">
                <strong>{{ip.type}}:</strong>&nbsp;&nbsp; {{ip.address}}/{{ip.netmask}}
              </mat-list-item>
            </mat-list>
          </div>
        

          <div class="slide vlans" *ngIf="path[1].name == 'vlans'" fxFlex="100">
            <div class="list-subheader">{{currentSlideName}}</div>
            <mat-list *ngIf="nicState && nicState.vlans && nicState.vlans.length > 0"> 
              <mat-list-item role="listitem" 
                *ngFor="let vlan of nicState.vlans; let i=index" 
                (click)="updateSlide('vlan addresses',vlanAliases(i).length > 0, 2, i)" 
                [ngClass]="{'clickable': vlan.aliases.length > 0}">
                
                <strong>{{vlan.name}}:</strong>&nbsp;&nbsp; {{vlanAliases(i).length}} addresses
                <mat-icon *ngIf="vlan.aliases.length > 0" class="next-slide" [ix-auto]="vlan.name" ix-auto-type="button" ix-auto-identifier="nextSlide">chevron_right</mat-icon>
              
              </mat-list-item>
            </mat-list>
          </div>

          <div *ngIf="nicState.lagg_ports && path[1].name == 'interfaces'" class="slide lagg-ports"fxFlex="100">
            <div class="list-subheader">{{"Interfaces" | translate}}</div>
            <mat-list> 
              <mat-list-item role="listitem" *ngFor="let port of nicState.lagg_ports;" >
                <strong>{{"Interface" | translate}}:</strong>&nbsp;&nbsp; {{port}}
              </mat-list-item>
            </mat-list>
          </div>

          <div class="slide empty" *ngIf="path[1].name == 'empty'" fxFlex="100">
          </div>

          <div class="slide vlan-addresses" *ngIf="path[2].name == 'vlan addresses'"  fxFlex="100">
            <div class="list-subheader">{{"VLAN Addresses" | translate}}</div>
            <mat-list *ngIf="nicState && vlanAliases(path[2].index).length > 0"> 
              <mat-list-item role="listitem"*ngFor="let ip of vlanAliases(path[2].index);" [ngClass]="{'hidden': ip.type !== 'INET' && ip.type !== 'INET6'}">
                <strong>{{ip.type | translate}}:</strong>&nbsp;&nbsp; {{ip.address}}/{{ip.netmask}}
              </mat-list-item>
            </mat-list>
          </div>

          <div class="slide empty" *ngIf="path[2].name == 'empty'" fxFlex="100">
          </div>

        </div>

      </mat-card-content>
    </mat-card>

  </div>
</div>
